<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<script src="/resources/js/jquery.1.9.1.min.js"></script>
<script src="/resources/js/bootstrap.min.js"></script>
<title>${trollNews.title}</title>
</head>
<body>
	<div id="fb-root"></div>
	<script>
		(function(d, s, id) {
			var js, fjs = d.getElementsByTagName(s)[0];
			if (d.getElementById(id))
				return;
			js = d.createElement(s);
			js.id = id;
			js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.1";
			fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));
	</script>
	<tiles:insertDefinition name="mobileDefaultTemplate">
		<tiles:putAttribute name="body">
			<c:if test="${message != null }">
				<div class="alert alert-success" role="alert"
					style="padding: 10px; margin-bottom: 0px; margin-top: 40px;">
					<b>${message}</b>
				</div>
			</c:if>
			<div id="mainContainer">
				<div class="mainBox newsDetail">
					<div class="subHeading" style="padding: 7px 10px;">
						<div style="float: left">
							<h3>${trollNews.title}</h3>
						</div>
					</div>
					<div class="clear"></div>
					<div class="newsInfo">
						<div class="stats">
							<span class="views"><span class="number"><fmt:formatNumber
										pattern="#,###,##0" value="${ trollNews.viewNumber}" /></span></span> <span
								class="comments"> <span class="number"><fmt:formatNumber
										pattern="#,###,##0" value="${ trollNews.commentNumber}" /></span></span>
						</div>
						<div class="uploader">
<%-- 							<img src="${trollNews.uploader.avatar}"> --%>
							<div class="info">
								<span>Đăng bởi: </span><a href="/uploader/${trollNews.uploader.id}">${trollNews.uploader.name}</a>
<%-- 								<span class="likes" title="lượt thích"><fmt:formatNumber --%>
<%-- 										pattern="#,###,##0" value="${ trollNews.uploader.likeNumber}" /></span> --%>
							</div>
							<div class="clear"></div>
						</div>
					</div>

					<div class="arrowButtons">
						<c:if test="${trollNews.prevTrollId != -1}">
							<a class="prevButton" href="${trollNews.prevTrollId}"><img
								alt="" src="/resources/images/prev_icon.png">Trước</a>
						</c:if>
						<c:if test="${trollNews.nextTrollId != -1}">
							<a class="nextButton" href="${ trollNews.nextTrollId}">Sau<img
								alt="" src="/resources/images/next_icon.png"></a>
						</c:if>
					</div>

					<div class="clear"></div>

					<div class="photoImg">
						<img src="/resources/data/photos/${trollNews.url}"
							alt="${trollNews.title}">
					</div>

					<div class="commentContainer">
						<h4>Bình luận</h4>
						<div class="fb-comments"
							data-href="http://trollvl.com/photo/${trollNews.id}"
							data-width="345px" data-colorscheme="light" mobile="auto-detect"></div>
					</div>
				</div>
			</div>
		</tiles:putAttribute>
	</tiles:insertDefinition>
</body>
</html>